<!--  -->
<template>
  <div class="">
    {{ getTile }} <br />
    {{ data }} <br>
    <button @click="changeMsg">修改</button>
  </div>
</template>


<script setup>
import { computed, reactive, ref, watch } from "vue";
const data = reactive({
  title: "我爱vue",
  content: "",
});
// 使用computed函数即可将返回值变成计算属性
const getTile = computed(() => {
  return data.title + "假的";
});

// 修改函数
function changeMsg() {
  data.content = data.content + "我被修改了";
}

// 使用watch进行监听
// 1,监听对象
watch(
  data,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);
// 2,监听对象中的某个属性
watch(
  () => { data.content },
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);
</script>


<style lang='' scoped>
/* @import url(); 引入公共css类 */
</style>